<template>
  <tab-bar>
    <tab-bar-item path="/home" activeColor="#317ffb">
      <!-- 在build vue.config.js 中起了别名 -->
      <span slot="item-icon" class="iconfont icon-ziyuan item-icon"></span>
      <span
        slot="item-icon_active"
        class="iconfont icon-ziyuan item-icon_active"
      ></span>
      <div slot="item-text" class="item-text">首页</div>
    </tab-bar-item>
    <tab-bar-item path="category" activeColor="#317ffb">
      <span slot="item-icon" class="iconfont icon-fenlei item-icon"></span>
      <span
        slot="item-icon_active"
        class="iconfont icon-fenlei item-icon_active"
      ></span>
      <div slot="item-text" class="item-text">分类</div>
    </tab-bar-item>
    <tab-bar-item path="/cart" activeColor="#317ffb">
      <span slot="item-icon" class="iconfont icon-gouwuche item-icon"></span>
      <span
        slot="item-icon_active"
        class="iconfont icon-gouwuche item-icon_active"
      ></span>
      <div slot="item-text" class="item-text">购物车</div>
    </tab-bar-item>
    <tab-bar-item path="/profile" activeColor="#317ffb">
      <span slot="item-icon" class="iconfont icon-wode item-icon"></span>
      <span
        slot="item-icon_active"
        class="iconfont icon-wode item-icon_active"
      ></span>
      <div slot="item-text" class="item-text">我的</div>
    </tab-bar-item>
  </tab-bar>
</template>
<script>
// 在build webpack.base.conf.js 28行中 起了别名，src的要加~
import TabBar from "components/common/tabbar/TabBar";
import TabBarItem from "components/common/tabbar/TabBarItem";
export default {
  name: "MainTabBar",
  components: {
    TabBar,
    TabBarItem,
  },
};
</script>

<style scoped>
.item-icon {
  color: #666;
}
.item-icon_active {
  color: var(--color-high-text);
  font-weight: 700;
}
.item-text {
  font-size: 14px;
}
</style>
